// Import the Fabric variables and mixins
@import '~office-ui-fabric-react/dist/sass/References';
// Colors (all taken from the MDL2 palette)
$color-home-darker: #004e8c;
$color-home-dark: #0063b1;
$color-home-medium: #0078d4;
$color-home-light: #3a96dd;
$color-home-lighter: #b3dbf2;
$color-getStarted-darker: #5c126b;
$color-getStarted-dark: #721481;
$color-getStarted-medium: #881798;
$color-getStarted-light: #b146c2;
$color-getStarted-lighter: #dea2ed;
$color-styles-darker: #006f94;
$color-styles-dark: #0099bc;
$color-styles-medium: #00bcf2;
$color-styles-light: #31d2f7;
$color-styles-lighter: #99ecff;
$color-components-darker: #038387;
$color-components-dark: #009ca4;
$color-components-medium: #00b7c3;
$color-components-light: #30c6cc;
$color-components-lighter: #91e5df;
$color-resources-darker: #b05e0d;
$color-resources-dark: #d47300;
$color-resources-medium: #ff8c00;
$color-resources-light: #ffaa44;
$color-resources-lighter: #ffdabb;
$color-blog-darker: #73aa24;
$color-blog-dark: #8cbd18;
$color-blog-medium: #a4cf0c;
$color-blog-light: #bad80a;
$color-blog-lighter: #d1ec3c;
// Component variables
$App-maximumWidth: 1600px;
// Padding matches padding used by UHF at the same (lg / sm) UHF breakpoints
$App-padding-left-lg: 5%;
$App-padding-right-lg: 5%;
$App-padding-left-sm: 6px;
$App-padding-right-sm: 24px;
//SVG
// With the increase in App-maximumWidth for UHF adoption,
// this makes sure the "V" in the hero stays visable at different breakpoints
$svg-hero-bottom-alignment: -3px;
// With the increase in App-maximumWidth for UHF adoption,
// this gets rid of a thin white gap under component page angles
$svg-angle-bottom-alignment: -1px;
$CodeBlock-toggleButtonHeight: 28px;
$Header-backgroundColor: $ms-color-black;
$Header-height: 50px;
$Header-height-full-uhf: $Header-height * 2;
$Nav-width: 230px;
$PageHeader-attachedTitleHeight: 80px;
$PageHeader-navHeight: 48px;
$PageHeader-titleHeight: 188px;
$PageHeader-fullHeight: $PageHeader-titleHeight+$PageHeader-navHeight;
// High contrast colors
// @todo: Shouldn't these, and the mixins, be in Fabric Core?
$high-contrast-blueBG: #0000c0;
$high-contrast-purpleBG: #37006e;
$high-contrast-cyan: #1aebff;
$high-contrast-yellow: #ffff00;
$high-contrast-green: #3ff23f;
// Extended type ramp
$font-size-big: 24px;
$font-size-bigger: 36px;
$font-size-biggest: 48px;
$font-size-huge: 72px;
// Padding of content (distance from content to edge of screen on different devices)
$contentPadding-sm: 16px;
$contentPadding-lg: 32px;
$contentPadding-xl: 40px;
$contentPaddingBottom: 100px;
$contentInGrid: 12px; // Content in a grid wrapped div needs extra padding to align with other page content
$contentMargin-vertical: 16px; // Consistent spacing across pages for titles and descriptions
$titleMargin-vertical: 32px; // Consistent spacing across pages for titles and descriptions
// Screen sizes that align with UHF breakpoints
// They differ from Fabric Core breakpoints
$uhf-screen-min-mobile: 768px;
$uhf-screen-max-mobile: ($uhf-screen-min-mobile - 1);
$uhf-screen-max-lg: 1083px;
// These variables assist with overriding UHF typography styles
// Typography values are set in _typography.scss,
// but they sometimes need to be added to more specific selectors throughout the website because of UHF
$uhf-h3-margin: 40px 0 8px 0;
$uhf-h2-margin: 48px 0 4px 0;
$uhf-h4-margin: 8px 0;
$uhf-p-margin-bottom: 12px;
$baseURL: ' https://static2.sharepointonline.com/files/fabric/';